<template>
  <div class="app-container">
    <el-form inline>
      <el-form-item :label="queryTime.label">
        <el-date-picker :type="queryTime.type" v-model="queryParams.date" :value-format="queryTime.format"
          @change="queryData" />
      </el-form-item>
      <el-form-item label="指标">
        <el-radio-group v-model="valueKeys[0]" @change="updateChart">
          <el-radio-button v-for="(v,k,i) in valueFormat" :label="k" :key="'value_key_'+i">{{ $t(v.name) }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div ref="chart" style="width: 90vw;height: 45vh;"></div>
  </div>
</template>
<script>
  import {
    MultipleValueChart
  } from '@/views/components/chart'
  import {
    FreeCalendarChart
  } from './components/CalendarChart'
  export default {
    name: 'CalendarBar',
    mixins: [MultipleValueChart, FreeCalendarChart],
    data() {
      const vm = this
      return {
        chartOption: {
          title: {
            text: vm.$t('chart.DepartmentDeviceAnalysis'),
            left: 'center'
          },
          tooltip: {
            show: true
          },
          xAxis: [{
            type: 'category'
          }],
          yAxis: [{
            type: 'value',
            show: true
          }]
        },
        queryParams: {
          groupDept: true,
          groupType: true,
          groupDate: 3
        },
        groupKeys: ['department'],
        valueKeys: ['onlinePercent'],
      }
    },
    methods: {
      changeGroupType(value) {
        this.queryParams.groupDept = false
        this.queryParams.groupType = false
        this.queryParams.groupDate = null
        if (value === 5) {
          this.queryParams.groupType = true
          this.groupKeys[0] = 'type'
        } else if (value == 4) {
          this.queryParams.groupDept = true
          this.groupKeys[0] = 'department'
        } else {
          this.queryParams.groupDate = value
          this.groupKeys[0] = 'date'
        }
        this.groupCount = getGroupCount(this.queryParams, this);
        this.queryData()
      }
    }
  }

</script>
